<template>
  <div class="reg-c">
    <div class="reg">
      <div class="title">
        <p>scrcnet</p>
        <p>scrcnet 平台数据管理系统</p>
      </div>
      <!-- 表单验证开始 -->
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="auto"
      >
        <!-- 手机 -->
        <el-form-item prop="phone">
          <el-input
            v-model="ruleForm.phone"
            placeholder="手机号码"
            clearable
            prefix-icon="el-icon-mobile"
            autofocus
          ></el-input>
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="yan">
          <el-input
            v-model="ruleForm.yan"
            placeholder="验证码"
            clearable
            prefix-icon="el-icon-chat-line-square"
            autofocus
            style="width:210px;padding-right:10px"
          ></el-input>
          <el-button
            type="ghost"
            @click="showYz"
            :class="{ disabled: !this.canClick }"
            >{{ content }}</el-button
          >
        </el-form-item>
        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input
            v-model="ruleForm.username"
            placeholder="用户名"
            clearable
            prefix-icon="el-icon-user"
          ></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input
            v-model="ruleForm.password"
            placeholder="密码"
            clearable
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>
        <!-- 确认密码 -->
        <el-form-item prop="repassword">
          <el-input
            v-model="ruleForm.repassword"
            placeholder="确认密码"
            clearable
            prefix-icon="el-icon-lock"
          ></el-input>
        </el-form-item>
        <!-- 同意用户协议 -->
        <div class="forget">
          <el-checkbox v-model="ruleForm.checked">同意用户协议</el-checkbox>
        </div>

        <br />
        <br />

        <!-- 注册 -->
        <el-form-item>
          <el-button class="login-btn" @click="submitForm('ruleForm')"
            >注册</el-button
          >
        </el-form-item>
      </el-form>
      <!-- 社交账号登陆 -->
      <div class="social">
        <div class="soc cursor">
          社交账号登入
          <i class="fa fa-weixin fa-2x"></i>
          <i class="fa fa-qq fa-2x"></i>
          <i class="fa fa-weibo fa-2x"></i>
        </div>
        <div class="regs cursor" @click="$router.push('/login')">
          已有账号登陆
        </div>
      </div>
      <div class="footer">
        <div class="top cursor">scrcnet</div>
        <div class="bottom cursor">
          <span>获取授权</span>
          <span>在线演示</span>
          <span>前往官网</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        //   表单验证手机
        phone: "",
        // 表单验证码
        yan: "",
        // 密码
        password: "",
        // 确认密码
        repassword: "",
        // 昵称、
        username: "",
        checked: true
      },
      content: "发送验证码",
      time: 10,
      canClick: true,

      //   表单校验规则
      rules: {
        // 手机号码验证
        phone: [
          {
            required: true,
            message: "请输入手机号码",
            trigger: ["blur"]
          },
          {
            pattern: /^1[34578]\d{9}$/,
            message: "目前只支持中国大陆的手机号码"
          }
        ],
        // 验证码验证
        yan: [
          {
            required: true,
            message: "请输入验证码",
            trigger: ["blur"]
          }
        ],
        //   用户名
        username: [
          {
            required: true,
            message: "请输入用户名",
            trigger: ["blur"]
          },
          {
            pattern: /^[a-zA-Z0-9_-]{4,16}$/,
            message: "4到16位（字母，数字，下划线，减号）"
          }
        ],
        // 密码验证
        password: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur"]
          },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
            message: "密码至少包含 数字和英文，长度6-20"
          }
        ],
        // 密码确认
        repassword: [
          {
            required: true,
            message: "请输入密码",
            trigger: ["blur"]
          },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/,
            message: "密码至少包含 数字和英文，长度6-20"
          }
        ]
      }
    };
  },

  methods: {
    //   注册
    submitForm(formName) {
      if (this.ruleForm.checked == true) {
        console.log(111);

        this.setCookie(this.ruleForm.username, this.ruleForm.password, 7);
      } else {
        console.log(222);

        this.clearCookie();
      }
    },
    // 获取验证码
    showYz() {
      if (!this.canClick) return;
      this.canClick = false;
      let clock = window.setInterval(() => {
        this.time--;
        this.content = this.time + "s后再发";
        if (this.time < 0) {
          window.clearInterval(clock);
          this.content = "发送验证码";
          this.time = 10;
          this.canClick = true;
        }
      }, 1000);
    }
  }
};
</script>

<style lang="less" scoped>
.reg-c {
  padding: 120px 0;

  .reg {
    width: 375px;
    height: 481px;
    margin: 0 auto;
    .title {
      text-align: center;
      padding: 20px;
      p:nth-child(1) {
        font-size: 30px;
        margin-bottom: 5px;
      }
      p:nth-child(2) {
        font-size: 16px;
        color: #999;
      }
    }
    .el-form {
      padding: 20px;
      .login-btn {
        background-color: #009688;
        color: #fff;
        width: 100%;
      }
      .forget {
        margin-top: 30px;
        display: flex;
        justify-content: space-between;
        span {
          font-size: 14px;
          color: #029789;
        }
      }
    }
    .social {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      font-size: 14px;
      align-items: center;
      .soc {
        color: #999;
        i:nth-child(1) {
          color: aquamarine;
        }
        i:nth-child(2) {
          color: blue;
          padding: 0 8px;
        }
        i:nth-child(3) {
          color: red;
        }
      }
      .regs {
        color: #029789;
      }
    }
  }
  .footer {
    font-size: 14px;
    color: #999;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
    .top {
    }
    .bottom {
      margin: 20px;
      span:nth-child(2) {
        margin: 0 20px;
      }
    }
  }
}
.disabled {
  background-color: #ddd;
  border-color: #ddd;
  color: #57a3f3;
  cursor: not-allowed; // 鼠标变化
}
</style>
